<template>
  <div class="member-journal">
    <div class="header">
      <div class="nav no-scrollbar">
        <div class="nav_item" @click.stop="goto('/new_profile/journal')">
          {{ $t("btnText.task.start") }}
        </div>
        <div
          class="nav_item"
          :class="index + 1 == activeIndex ? 'active' : ''"
          v-for="(item, index) in partList"
          :key="item.label"
          @click.stop="onClickNavItem(index)"
        >
          {{ item.label }}
        </div>
      </div>
      <a-button type="primary" @click="goto('/pdf', { pdf: 'journal' })">{{
        $t("btnText.create_pdf")
      }}</a-button>
    </div> 
    <div class="content">
      <MemberJournalPart1 v-show="activeIndex == 1"></MemberJournalPart1>
      <MemberJournalPart2 v-show="activeIndex == 2"></MemberJournalPart2>
      <MemberJournalPart3 v-show="activeIndex == 3"></MemberJournalPart3>
      <MemberJournalPart4 v-show="activeIndex == 4"></MemberJournalPart4>
      <MemberJournalPart5 v-show="activeIndex == 5"></MemberJournalPart5>
      <MemberJournalPart6 v-show="activeIndex == 6"></MemberJournalPart6>
      <MemberJournalPart7 v-show="activeIndex == 7"></MemberJournalPart7>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, provide, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { postPartSixPdfMake } from "../../../api/part";
import { postDownloadPdfCount } from "../../../api/member";
import { message } from "ant-design-vue";

const route = useRoute();
const router = useRouter();

onBeforeMount(async () => {
  let res = await postDownloadPdfCount();
  if (res.code == 400) {
    message.warning(res.msg);
    goto("/pay");
    return;
  }
});

const activeIndex = ref();
activeIndex.value = route.query.step;
provide("activeStep", activeIndex);

watch(route, (n) => {
  activeIndex.value = n.query.step;
  if (
    activeIndex.value > partList.value.length||
    activeIndex.value < 0
  )
    return goto(-1);
});

const partList = ref([
  {
    label: "Part I",
  },
  {
    label: "Part II",
  },
  {
    label: "Part III",
  },
  {
    label: "Part IV",
  },
  {
    label: "Part V",
  },
  {
    label: "Part VI",
  },
  {
    label: "Part VII",
  },
]);

const onClickNavItem = async (index) => {
  router.push({ path: "/member/journal", query: { step: index + 1 } });
};
</script>
<style scoped lang="less">
.header {
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .nav {
    font-size: 16px;
    color: #36434d;
    display: flex;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    .nav_item {
      position: relative;
      &.active {
        color: #3d88f2;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 100%;
          height: 2px;
          background-color: #3d88f2;
        }
      }
    }
  }
  .ant-btn {
    height: 40px !important;
    border-radius: 12px 12px 12px 12px !important;
    font-size: 14px !important;
  }
}
.content {
  padding: 24px;
}

@media screen and (max-width: 768px) {
  .header {
    margin: 0;
    margin-bottom: 123px;
    .nav {
      overflow-x: scroll;
      font-size: 82px;
      gap: 123px;
      .nav_item {
        white-space: nowrap;
        &.active {
          &::after {
            bottom: -10px;
            height: 10px;
          }
        }
      }
    }
    .ant-btn {
      display: none;
    }
  }
  .content {
    padding: 0;
  }
}
</style>
